'use client'
import React, {useState} from "react"

type TListArray = {
  isShow: boolean
  activeImg: string
  img: string
  text: string
  slogan: string
  icon: string[]
}

const MobileFooter = () => {
  const [listArray, setListArray] = useState<TListArray[]>([
    {
      isShow: false,
      activeImg: "/images/footer/1a.png",
      img: "/images/footer/1.png",
      text: "一步一部Rolling",
      slogan: "努力拍出精彩故事短片",
      icon: [
        '/images/footer/bilibili.png',
        '/images/footer/douyin.png'
      ]
    },
    {
      isShow: false,
      activeImg: "/images/footer/2a.png",
      img: "/images/footer/2.png",
      text: "亿点点不一样",
      slogan: "我们不是科普，我们与你一起发现",
      icon: [
        '/images/footer/bilibili.png',
        '/images/footer/douyin.png',
        '/images/footer/weibo.png',
        '/images/footer/youtobe.png',
        '/images/footer/redBook.png',
        '/images/footer/penyuanquan.png'
      ]
    },
    {
      isShow: false,
      activeImg: "/images/footer/3a.png",
      img: "/images/footer/3.png",
      text: "影视飓风",
      slogan: "与你分享前沿、有趣的科技产品体验",
      icon: [
        '/images/footer/bilibili.png',
        '/images/footer/douyin.png',
        '/images/footer/weibo.png',
        '/images/footer/youtobe.png',
        '/images/footer/redBook.png',
        '/images/footer/penyuanquan.png'
      ]
    },
    {
      isShow: false,
      activeImg: "/images/footer/4.png",
      img: "/images/footer/4.png",
      text: "飓多多StormCrew",
      slogan: "影视飓风团建日常分享",
      icon: [
        '/images/footer/bilibili.png',
        '/images/footer/douyin.png',
        '/images/footer/weibo.png',
        '/images/footer/youtobe.png',
        '/images/footer/redBook.png',
        '/images/footer/penyuanquan.png'
      ]
    },
    {
      isShow: false,
      activeImg: "/images/footer/5a.png",
      img: "/images/footer/5.png",
      text: "飓风商店",
      slogan: "影视飓风新品推荐",
      icon: [
        '/images/footer/bilibili.png',
        '/images/footer/douyin.png',
        '/images/footer/weibo.png',
        '/images/footer/youtobe.png',
        '/images/footer/redBook.png',
        '/images/footer/penyuanquan.png'
      ]
    }
  ])

  const isShow = (index: number) => {
    const copy = listArray.slice()
    copy.forEach((item, _index) => {
      if (index === _index) {
        item.isShow = !item.isShow
      } else {
        item.isShow = false
      }
    })
    setListArray(copy)
  }

  return <div className="lg:hidden mt-12 ">

    <div className='px-4 mb-4'>
      <p className='text-sm text-[#646464 ] font-[600]'>ACCOUNT</p>
      <p className="text-[#24252C] font-[600] text-2xl">官方账号</p>
    </div>

    <ul className='px-4'>
      {
        listArray.map((item, index) => {
          return <div key={index} className='mb-6'>
            <li className=" bg-[#F4F6F7] p-4">
              <div className="flex justify-between items-center">
                <div className="flex items-center">
                  <img className="w-16 h-12 mr-2" src={item.activeImg} alt=""/>
                  <div>
                    <p className="text-[0.85rem] text-[#24252C] font-[600]">{item.text}</p>
                    <p className="text-[0.75rem] text-[#646464] font-[300]">{item.slogan}</p>
                  </div>
                </div>
                {!item.isShow &&
                  <svg onClick={() => isShow(index)} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                       strokeWidth={1.5}
                       stroke="currentColor" className="size-6">
                    <path strokeLinecap="round" strokeLinejoin="round"
                          d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0-3.75-3.75M17.25 21 21 17.25"/>
                  </svg>}


                {item.isShow &&
                  <svg onClick={() => isShow(index)} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                       strokeWidth={1.5}
                       stroke="currentColor" className="size-6">
                    <path strokeLinecap="round" strokeLinejoin="round"
                          d="M3 4.5h14.25M3 9h9.75M3 13.5h5.25m5.25-.75L17.25 9m0 0L21 12.75M17.25 9v12"/>
                  </svg>}

              </div>
            </li>

            {
              item.isShow &&
              <div className="bg-[#F4F6F7]  p-4 justify-between"
                   style={{display: 'grid', gridTemplateColumns: 'repeat(4, auto)', gap: '20px'}}>
                {item.icon.map((pItem, index) => {
                  return <img key={index} src={pItem} alt=""
                              className="w-10 h-10 hover:scale-110 transition hover:tracking-[2px]"/>
                })}
              </div>
            }

          </div>
        })
      }


    </ul>
  </div>
}

export default MobileFooter